<template>
  <canvas style="width: 500px"></canvas>
</template>

<script>
import * as PIXI from 'pixi.js'

export default {
  mounted() {
    const app = new PIXI.Application({
      view: this.$el,
      antialias: true,
      resolution: 2,
      width: 500,
      height: 500,
      backgroundColor: 0x000000
    })

    const graphics = new PIXI.Graphics()
    graphics.lineStyle(2, 0x666666, 1)
    graphics.beginFill(0xAA4F08, 0);
    graphics.drawEllipse(250, 250, 200, 50)
    graphics.endFill()
    app.stage.addChild(graphics)

    const point = new PIXI.Graphics()
      .lineStyle(0)
      .beginFill(0xffffff)
      .drawCircle(250, 250, 10)
      .endFill()
    app.stage.addChild(point)

    let angle = 0
    const spin = (el, w, h, speed = 1) => {
      if (!w && !h) return

      angle *= angle !== 360
      angle += speed

      let t = Math.tan(angle / 360 * Math.PI)
      let x = w * (1 - t ** 2) / (1 + t ** 2)
      let y = h * 2 * t / (1 + t ** 2)

      el.position.set(x, y)
    }

    app.ticker.add(() => {
      spin(point, 200, 50, 0.5)
    })

  }
}
</script>

<style>

</style>